<template>
    <div id="app">
        <div class="form-menu">
            <el-menu :default-active="activeIdx" class="el-menu-demo"
                     mode="horizontal"
                     background-color="#333333"
                     text-color="#999999"
                     active-text-color="#fff"
                     @select="handleSelect">
                <el-menu-item index="process-manager">流程管理</el-menu-item>
                <el-menu-item index="apply-manager">申请审批</el-menu-item>
                <el-menu-item index="task-manager">任务管理</el-menu-item>
                <el-menu-item index="task-approve">审批</el-menu-item>
                <el-menu-item index="task-diagram">流程图</el-menu-item>
            </el-menu>
        </div>
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "app",
        data() {
            return {
                activeIdx: 'process-manager'
            }
        },
        watch: {
            '$route' : function () {
                this.activeIdx = this.$route.name;
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push(key);
            }
        },
        created: function () {
            this.$router.push({
                name : "process-manager"
            });
        }
    };
</script>

<style scoped>

</style>
